<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tabData" style="width: 100%" border height="540">
      <el-table-column align="center" prop="username" label="审核人"  />
      <el-table-column align="center" prop="visitor" label="来访人"/>
      <el-table-column align="center" property="mobile" label="来访人电话"  />
      <el-table-column align="center" property="carnumber" label="来访人车牌" />
      <el-table-column align="center" property="addtime" label="审核时间" />
      <el-table-column align="center" label="状态">
        <template #default="scope">

          <el-tag type="warning" v-if="scope.row.is_status === 0">
            {{ scope.row.is_status === 0 ? "待初审" : '初审拒绝' }}
          </el-tag>

          <el-tag type="info" v-if="scope.row.is_status === 1">
            {{ scope.row.is_status === 1 ? "待二审" : '二审拒绝' }}
          </el-tag>

          <el-tag type="info" v-if="scope.row.is_status === 3">
            {{ scope.row.is_status === 3 ? "待终审" : '终审拒绝' }}
          </el-tag>

          <el-tag type="success" v-if="scope.row.is_status === 5">
            {{ scope.row.is_status === 5 ? "终审通过" : '终审拒绝' }}
          </el-tag>

          <el-tag type="danger" v-if="scope.row.is_status === 6">
            {{ scope.row.is_status === 6 ? "终审拒绝" : '终审通过' }}
          </el-tag>

        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button type="info" @click="details(scope.row.logid)">详情</el-button>
        </template>
      </el-table-column>

    </el-table>


    <!-- 分页 -->
    <div class="page">
      <el-config-provider :locale="zhCn">
        <el-pagination v-model:currentPage="data.page" v-model:page-size="data.pageSize" :page-sizes="[5, 10, 15, 20]"
          layout="total, sizes, prev, pager, next, jumper" :total="totals" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </el-config-provider>
    </div>


  </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import { auditlist } from "../../api/visituser";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import router from '../../router/router'

// 列表
let tabData = ref([])
let totals: any = ref(0)  // 一共多少条数据
let data = reactive({
  page: 1,
  pageSize: 10,
})
let geTauditlist = async () => {
  let res:any = await auditlist(data)
  console.log(res);
  tabData.value = res.data
  totals.value = res.total
}
geTauditlist()

// 分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  geTauditlist()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  geTauditlist()
}

// 审核详情
let details =(id:any) => {
  console.log(id);
  router.push({path:'details',query:{id}})
}



</script>

<style scoped lang='less'>
  .page{
    display: flex;
    justify-content: end;
    margin-top: 20px;
  }
</style>